<template>
	<div class='slide-card'>
		<img :src="imgs[0]">
		<div class="text">
			<p>10月</p>
			<p>热门改造教程合集</p>
		</div>
		<div class="dots">
			<div
				class="dot"
				:class="i === active ? 'active' : ''"
				v-for="(item,i) in 3"
				:key="item"
			/>
		</div>
	</div>
</template>

<script>
export default {
  props: {
    imgs: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      active: 0,
    }
  },
}
</script>

<style lang='scss' scoped>
.slide-card {
  position: relative;

  img {
    width: 100%;
  }

  .text {
    position: absolute;
    top: 46%;
    left: 10%;
    font-size: 58px;
    line-height: 60px;
    color: #ffffff;
    text-shadow: 4px 4px 0 #0b53b3;
  }

  .dots {
    position: absolute;
    bottom: 13px;
    left: 50%;
    display: flex;
    transform: translateX(-50%);

    .dot {
      width: 10px;
      height: 10px;
      background-color: #ffffff;
      border-radius: 10px;

      &:not(:first-of-type) {
        margin-left: 10px;
      }

      &.active {
        background-color: $primary1;
      }
    }
  }
}
</style>
